<template>
    <div class="grow-layout">
        <div class="grow-layout-top">
            <div class="grow-layout-top-left">
                <Title title="新梢生长长度"></Title>
                <div class="grow-layout-top-left-box">
                    <div class="grow-layout-top-left-box-module1">
                        <chart :option="leftTopChart1"></chart>
                    </div>
                    <div class="grow-layout-top-left-box-module2">
                        <chart :option="leftTopChart2"></chart>
                    </div>
                </div>
            </div>
            <div class="grow-layout-top-center">
                <Title title="作物张势分析"></Title>
                <div class="grow-layout-top-center-box">
                    <img src="@/images/grow/bg.png" alt="">
                </div>
            </div>
            <div class="grow-layout-top-right">
                <Title title="病虫害"></Title>
                <div class="grow-layout-top-right-box">
                    <div class="grow-layout-top-right-box-list">
                        <div class="grow-layout-top-right-box-list-item" v-for="(v, k) in state.list" :key="k">
                            <div class="grow-layout-top-right-box-list-item-left">
                                <div class="grow-layout-top-right-box-list-item-left-top">
                                    <div class="grow-layout-top-right-box-list-item-left-top-icon">
                                    </div>
                                    <div class="grow-layout-top-right-box-list-item-left-top-text">{{ v.name }}</div>
                                </div>
                                <div class="grow-layout-top-right-box-list-item-left-bottom"
                                    :style="{ width: v.width + 'vw' }">
                                </div>
                            </div>
                            <div class="grow-layout-top-right-box-list-item-right">
                                <div class="grow-layout-top-right-box-list-item-right-top">{{ v.num }}%</div>
                                <div class="grow-layout-top-right-box-list-item-right-bottom"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="grow-layout-bottom">
            <div class="grow-layout-bottom-left">
                <Title title="叶绿面积"></Title>
                <div class="grow-layout-bottom-left-box">
                    <chart :option="leftBottomChart"></chart>
                </div>
            </div>
            <div class="grow-layout-bottom-center">
                <Title title="根系生长"></Title>
                <div class="grow-layout-bottom-center-box">
                    <div class="grow-layout-bottom-center-box-module">
                        <chart :option="centerBottomChart1"></chart>
                    </div>
                    <div class="grow-layout-bottom-center-box-module">
                        <chart :option="centerBottomChart2"></chart>
                    </div>
                </div>
            </div>
            <div class="grow-layout-bottom-right">
                <Title title="灾害性天气"></Title>
                <div class="grow-layout-bottom-right-box">
                    <tableList :columns="state.rightBottomData.columns"
                        :headerStyle="{ background: '#053260', height: '40px' }" :rows="state.rightBottomData.rows">
                    </tableList>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import Title from './components/common/title.vue'
import { leftTopChart1, leftTopChart2, leftBottomChart, centerBottomChart1, centerBottomChart2 } from './grow'
import chart from '@/components/echarts-box.vue'
import tableList from '@/components/table.vue'
import { reactive } from 'vue'
const state = reactive({
    list: [
        { width: '10', name: '玉米大斑病', num: '68' },
        { width: '12', name: '水稻瘟疫病', num: '51' },
        { width: '14', name: '草地贪夜蛾', num: '77' },
        { width: '11', name: '蝗虫', num: '21' },
        { width: '7', name: '草地螟', num: '43' },
        { width: '11.5', name: '黏虫', num: '55' },
        { width: '12', name: '二化螟', num: '61' },
        { width: '11', name: '玉米螟', num: '72' },
    ],
    rightBottomData: {
        columns: [
            { key: 'A111', title: '实际频次' },
            { key: 'B111', title: '预测频次' },
            { key: 'C111', title: '年平均频次' },
        ],
        rows: [
            {
                A111: '2043',
                B111: '1876',
                C111: '1554',
                ID: '暴雨'
            },
            {
                A111: '1678',
                B111: '213',
                C111: '433',
                ID: '干旱'
            },
            {
                A111: '781',
                B111: '445',
                C111: '33',

                ID: '冰雹'
            },
            {
                A111: '664',
                B111: '317',
                C111: '115',

                ID: '雷电'
            },
            {
                A111: '741',
                B111: '234',
                C111: '15',
                ID: '暴雪'
            },
            {
                A111: '124',
                B111: '22',
                C111: '0',
                ID: '龙卷风'
            },
            {
                A111: '781',
                B111: '445',
                C111: '33',

                ID: '冰雹'
            },
            {
                A111: '664',
                B111: '317',
                C111: '115',

                ID: '雷电'
            },
            {
                A111: '741',
                B111: '234',
                C111: '15',
                ID: '暴雪'
            },
            {
                A111: '124',
                B111: '22',
                C111: '0',
                ID: '龙卷风'
            },
        ]
    },
})
</script>
<style lang="less" scoped>
.grow-layout {
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;

    &-top {
        height: 60%;
        margin-bottom: 10px;
        display: flex;

        &-left,
        &-center,
        &-right {
            height: 100%;
            display: flex;
            flex-direction: column;

            &-box {
                flex: 1;
                padding: 10px;
                background: url(@/images/border.png) no-repeat;
                background-size: 100% 100%;
            }
        }

        &-left {
            width: 410px;

            &-box {
                display: flex;
                flex-direction: column;

                &-module1,
                &-module2 {
                    flex: 1;
                }
            }
        }

        &-center {
            flex: 1;
            margin: 0 10px;

            &-box {
                position: relative;

                img {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 100%;
                    height: 100%;
                    padding:10px;
                    // object-fit: cover;
                }
            }
        }

        &-right {
            width: 410px;

            &-box {
                height: 100%;

                &-list {
                    height: 100%;
                    display: flex;
                    flex-direction: column;

                    &-item {
                        flex: 1;
                        padding: 4px 8px;
                        display: flex;
                        align-items: center;

                        

                        &-left {
                            flex: 1;
                            margin-right: 20px;;
                            &-top {
                                display: flex;
                                align-items: center;

                                &-icon {
                                    width: 30px;
                                    height: 20px;
                                    margin-right: 50px;
                                    background: url(@/images/grow/icon1.png) no-repeat;
                                    background-size: 100% 100%;


                                }

                                &-text {
                                    font-size: 16px;
                                    font-weight: normal;
                                    color: #FFFFFF;
                                }
                            }

                            &-bottom {
                                position: relative;
                                background: linear-gradient(to right, transparent, #01eaff);
                                height: 5px;

                                &::after {
                                    content:"";
                                    position: absolute;
                                    top: 50%;
                                    right: -20px;
                                    transform: translateY(-50%);
                                    width: 35px;
                                    height: 35px;
                                    background: url(@/images/grow/circle.png) no-repeat;
                                    background-size:100% 100%;    
                                }
                            }
                        }



                        &-right {
                            position: relative;

                            &-top {
                                font-size: 22px;
                                // font-family: Adobe Heiti Std;
                                font-weight: normal;
                                font-style: italic;
                                color: #FFFFFF;
                            }

                            &-bottom {
                                width: 20px;
                                height: 3px;
                                background: #00EAFF;
                                position: absolute;
                                right: 0;
                                bottom: -4px;
                            }
                        }

                        &:nth-of-type(2n) {
                            .grow-layout-top-right-box-list-item-left-top-icon {

                                background: url(@/images/grow/icon2.png) no-repeat;
                                background-size: 100% 100%;
                            }

                            .grow-layout-top-right-box-list-item-left-bottom {
                                background: linear-gradient(to right, transparent, #0084ff);
                            }

                            .grow-layout-top-right-box-list-item-right-bottom {
                                background: #0084ff;
                            }
                        }
                    }

                    ;
                }
            }
        }
    }

    &-bottom {
        flex: 1;
        // height: 20%;
        display: flex;
        overflow: hidden;
        &-left,
        &-center,
        &-right {
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            &-box {
                overflow: hidden;
                flex: 1;
                padding: 10px;
                background: url(@/images/border.png) no-repeat;
                background-size: 100% 100%;
            }
        }

        &-left {
            width: 410px;
            height: 100%;

        }

        &-center {
            flex: 1;
            height: 100%;
            margin: 0 10px;

            &-box {
                display: flex;

                &-module {
                    flex: 1;
                    margin-right: 20px;

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }

        &-right {
            width: 410px;
            height: 100%;
            overflow: hidden;
        }
    }
}
</style>